<template>
        <div class="box">
            <div class="index">{{ index+1 }}</div>
            <div class="serial">{{ data.serial }}</div>
            <el-progress 
            :text-inside="true" 
            :stroke-width="20" 
            :status = "color"
            :percentage="(data.done/data.total)*100" 
            class="pro"
            />
            <div class="total">{{ data.total }}个</div>
        </div>
</template>

<script setup>
import { computed, defineProps } from 'vue';
const props = defineProps({
    data:{
        type:Object,
        default:{}
    },
    index: {
        type:Number,
        default:0
    }
})
const color = computed(()=>{
    switch((props.index+1)%4){
        case 1 :
            return ''
        case 2 :
            return 'success'
        case 3 :
            return 'exception'
        case 0 :
            return 'warning'
        default :
            return ''
    }
})
</script>

<style scoped>
.box{
    display: flex;
    font-size: 12px;
}
.index{
    border-radius: 10px;
    width: 20px;
    height: 20px;
    background-color: green;
    text-align: center;
    line-height: 20px;
    margin-right: 5px;
}
.total{
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
}
.serial{
    height: 20px;
    line-height: 20px;
    margin-bottom: 15px;
}
.pro{
    width: 40%;
}
:deep(.el-progress-bar__outer){
    background-color: rgba(240, 248, 255, 0);
    border: 1px solid #00C1DE;
    border-radius: 10px;
}
.el-progress--line {
  margin:0 10px 15px 10px;
  max-width: 600px;
}
</style>